<template>
  <div class="container">
    <nav-bar title="专业人才总体分布情况"></nav-bar>
    <div class="chart-box chart1">
      <div class="chart-box-header">
        <pub-area
          :maxSelectLevel="5"
          @change="changeArea"
          customRightIcon
          label=""
          :isLink="false"
          valueIsLast
          ></pub-area>
        <div class="area-detail" @click="goDetailArea">
          区域分布情况
        </div>
      </div>
      <div class="chart-box-content">
        <div class="bottom-box">
          <div class="text" @click="changeEchart(1)">
            <div class="label">养老服务专家数</div>
            <div class="value">
              <count-to
                :startVal="0"
                :endVal="Number(state.detail.committeeExpert.total)"
                :decimals="0"
                :duration="1500"
              ></count-to>
              <span class="count">人</span>
            </div>
          </div>
          <div class="text" @click="changeEchart(2)">
            <div class="label">等级评定专家数</div>
            <div class="value">
              <count-to
                :startVal="0"
                :endVal="Number(state.detail.ratingExpert.total)"
                :decimals="0"
                :duration="1500"
              ></count-to>
              <span class="count">人</span>
            </div>
          </div>
          <div class="text" @click="changeEchart(3)">
            <div class="label">技能大赛专家数</div>
            <div class="value">
              <count-to
                :startVal="0"
                :endVal="Number(state.detail.skillExpert.total)"
                :decimals="0"
                :duration="1500"
              ></count-to>
              <span class="count">人</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="chart-box chart3">
      <div class="chart-box-header">
        专家职称
      </div>
      <div class="chart-box-content">
        <div class="bottom-box">
          <div class="zjzc" id="zjzc1" v-if="active === 1"></div>
          <div class="zjzc" id="zjzc2" v-if="active === 2"></div>
          <div class="zjzc" id="zjzc3" v-if="active === 3"></div>
        </div>
      </div>
    </div>

    <div class="chart-box chart2">
      <div class="chart-box-header">
        {{ active === 2 ? '专家所属领域':'专家业务领域' }}
      </div>
      <div class="chart-box-content">
        <div class="bottom-box">
          <div class="zjssly" id="zjssly1" v-if="active === 1"></div>
          <div class="zjssly" id="zjssly2" v-if="active === 2"></div>
          <div class="zjssly" id="zjssly3" v-if="active === 3"></div>
        </div>
      </div>
    </div>
    <!-- <div class="chart-box chart4">
      <div class="chart-box-header">
        专家专业类别
      </div>
      <div class="chart-box-content">
        <div class="bottom-box">
          <div class="certificate-item">
            <div class="left">
              <img src="./img/hl.png" alt="">
              <div class="label">
                养老护理专业（人）
              </div>
            </div>
            <div class="right">
              <count-to
                :startVal="0"
                :endVal="Number(state.detail.hasCert)"
                :decimals="0"
                :duration="1500"
              ></count-to>
            </div>
          </div>
          <div class="certificate-item">
            <div class="left">
              <img src="./img/fw.png" alt="">
              <div class="label">
                养老服务专业（人)
              </div>
            </div>
            <div class="right">
              <count-to
                :startVal="0"
                :endVal="Number(state.detail.noCert)"
                :decimals="0"
                :duration="1500"
              ></count-to>
            </div>
          </div>
          <div class="certificate-item">
            <div class="left">
              <img src="./img/yy.png" alt="">
              <div class="label">
                养老营养专业（人))
              </div>
            </div>
            <div class="right">
              <count-to
                :startVal="0"
                :endVal="Number(state.detail.noCert)"
                :decimals="0"
                :duration="1500"
              ></count-to>
            </div>
          </div>
          <div class="certificate-item">
            <div class="left">
              <img src="./img/gl.png" alt="">
              <div class="label">
                养老管理专业（人))
              </div>
            </div>
            <div class="right">
              <count-to
                :startVal="0"
                :endVal="Number(state.detail.noCert)"
                :decimals="0"
                :duration="1500"
              ></count-to>
            </div>
          </div>
          <div class="certificate-item">
            <div class="left">
              <img src="./img/jk.png" alt="">
              <div class="label">
                健康管理专业（人))
              </div>
            </div>
            <div class="right">
              <count-to
                :startVal="0"
                :endVal="Number(state.detail.noCert)"
                :decimals="0"
                :duration="1500"
              ></count-to>
            </div>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script setup>
import { useUserStore } from '@/pinia/modules/user'
import { CountTo } from 'vue3-count-to'
import * as echarts from 'echarts'
import { ref, reactive, onBeforeMount,onMounted,nextTick,onBeforeUnmount } from 'vue'
import { get_expert_analysis } from '@/api/elderDistribution'
import { appCurrentState } from '@/pinia/modules/app.js'
import { formatDictCode } from '@/utils/format.js'
import { useRouter } from 'vue-router'
const active = ref(1);
const router = useRouter()
const state = reactive({
  searchParams: {
    areaCode:useUserStore().userLastArea
  },
  detail: {
    committeeExpert:{},
    skillExpert:{},
    ratingExpert:{}
  },
  myChart1:null,
  myChart2:null
})
const getElderDetail = async () => {
  let res = await get_expert_analysis(state.searchParams)
  if (res.succeed) {
    state.detail = res.data
    nextTick(() => {
      initChartZJSSLY()
      initChartZJZC()
    })
  }
}

const changeArea = val => {
  state.searchParams.areaCode = val
  getElderDetail()
}

const changeEchart = val => {
  active.value = val
  nextTick(() => {
    initChartZJZC()
    initChartZJSSLY()
  })
}

const  initChartZJSSLY = async () => {
  state.myChart1 = echarts.init(document.getElementById('zjssly'+ active.value))
  const data = {
    1: [
          { value: state.detail.committeeExpert.belong1, name: '养老业务专家' },
          { value: state.detail.committeeExpert.belong2, name: '养老业务智能化领域专家' },
          { value: state.detail.committeeExpert.belong3, name: '养老业务政策研究专家' },
          { value: state.detail.committeeExpert.belong4, name: '养老业务经济研究专家' },
          { value: state.detail.committeeExpert.belong5, name: '养老业务信息化领域专家' }

        ],
    2: [
          { value: state.detail.ratingExpert.belong1, name: '公共服务领域' },
          { value: state.detail.ratingExpert.belong2, name: '公共服务设施领域' },
          { value: state.detail.ratingExpert.belong3, name: '公共安全领域' },
          { value: state.detail.ratingExpert.belong4, name: '人力资源领域' }

        ],
    3: [
          { value: state.detail.skillExpert.belong1, name: '养老业务专家' },
          { value: state.detail.skillExpert.belong2, name: '养老业务智能化领域专家' },
          { value: state.detail.skillExpert.belong3, name: '养老业务政策研究专家' },
          { value: state.detail.skillExpert.belong4, name: '养老业务经济研究专家' },
          { value: state.detail.skillExpert.belong5, name: '养老业务信息化领域专家' }

      ],
  }
  const data2 = {
    1:state.detail.committeeExpert.total,
    2:state.detail.ratingExpert.total,
    3:state.detail.skillExpert.total
  }
  const option = {
    title: [{
        // text: data2[active.value],
        // top: '50%',
        // left: '30%',
        // padding:[-15,0,0,-15],
        // textStyle: {
        //     color: '#333',
        //     fontSize: 36,
        //     fontWeight: '400',
        // },
    }],
    legend: {
      top: 'middle',
      right: '0%',
      orient  : 'vertical'
    },
    toolbox: {
      show: false,
    },

      tooltip: {
      trigger: 'item',
      formatter: '{b}: {c}人',
      // formatter: '{b}: {d}%',
      backgroundColor: 'rgba(47,37,198,0.75)',
      borderColor :'#2880FF',
        borderWidth: 1,
        textStyle:{
          color  :'#fff'
        }
    },
    series: [
      {
        name: 'Nightingale Chart',
        type: 'pie',
        radius: ['30%','80%'],
        center: ['30%', '50%'],
        roseType: 'area',
        label: {
          show: false,
          formatter: '{b}:{c}',
        },
        labelLine: {
          length: 2, //第一条线
          length: 5, //第二条线
          lineStyle: {
              width: 1, // 线条的宽度
          }
        },
        selectedOffset :30,
        selectedMode: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 2
        },
        data: data[active.value]
      }
    ]
  };

  state.myChart1 .setOption(option)
}

const initChartZJZC = async () => {
  state.myChart2 = echarts.init(document.getElementById('zjzc' + active.value))
  const xData = ['初级', '中级', '副高级', '正高级']
  const barData = {
    1:[
      state.detail.committeeExpert.profession1,
      state.detail.committeeExpert.profession2,
      state.detail.committeeExpert.profession3,
      state.detail.committeeExpert.profession4,
    ],
    2:[
      state.detail.ratingExpert.profession1,
      state.detail.ratingExpert.profession2,
      state.detail.ratingExpert.profession3,
      state.detail.ratingExpert.profession4,
    ],
    3:[
      state.detail.skillExpert.profession1,
      state.detail.skillExpert.profession2,
      state.detail.skillExpert.profession3,
      state.detail.skillExpert.profession4,
    ],
  }
  const option = {
    color: ['#2675FF'],
    tooltip: {
      trigger: 'axis',
      borderWidth: '0',
      backgroundColor: 'rgba(73,81,92,.95)', // 背景颜色
      textStyle: {
        color: '#fff' // 字体颜色
      },
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '10%',
      top: '24%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false, // 坐标轴两端不留空
        axisLine: {
          show: true, // 隐藏X轴轴线
          lineStyle: {
            color: '#D9D9D9'
          }
        },
        axisLabel: {
          show: true,
          // formatter: '{value}月',
          textStyle: {
            padding: [2, 0, 0, 0],
            color: '#333'
          }
        },
        axisTick: {
          show: false // 隐藏X轴刻度
        },
        axisPointer: {
          type: 'shadow'
        },
        data: xData
      }
    ],
    yAxis: [
      {
        type: 'value',
        minInterval: 1,
        axisLabel: {
          textStyle: {
            color: '#666'
          },
          margin: 20
        },
        // name的样式设计
        splitLine: {
          lineStyle: {
            type: 'solid', // 设置网格线类型 dotted：虚线 solid:实线
            color: '#E9E9E9'
          }
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        type: 'bar',
        stack: true, // 堆叠柱状图
        barWidth: 14, // 柱状图宽度
        itemStyle: {
          barBorderRadius: [10, 10, 10, 10]
        },

        data: barData[active.value]
      }
    ]
  }

  state.myChart2.setOption(option)
}

const goDetailArea = () => {
  router.push('/expertArea')
}

const changeTab = val => {
}
onBeforeUnmount(() => {
  state.myChart1 && state.myChart1.dispose()
  state.myChart2 && state.myChart2.dispose()
})

onMounted(() => {
  getElderDetail()
})
</script>
<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.container {
  height: 100%;
  background-color: #f8f8f8;
  overflow-y: auto;

  .chart-box {
    // width: calc(100% - 80px);
    width: 100%;
    font-size: 30px;
    font-family: Microsoft YaHei;
    color: #000000;
    margin-top: 20px;
    background-color: #fff;

    .chart-box-header {
      display: flex;
      align-items: center;
      height: 90px;
      border-bottom: 1px solid #E6E6E6;
    }
  }

  .chart1 {
    height: 320px;

    .chart-box-header {
      justify-content: space-between;
      :deep(.van-cell) {
          width: 220px;
          height: 100%;
        }
      .area-detail {
        padding-right: 40px;
        font-weight: 400;
        color: #4375E4;
      }
    }

    .chart-box-content {
      .bottom-box {
        height: 230px;
        width: 100%;
        display: flex;
        padding: 32px 20px;
        justify-content:space-between;
        align-items: center;
        font-size: 24px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;

        .text {
          width: 224px;
          height: 166px;
          padding-left: 24px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #3852A9;
          background-image: url(./img/zj1.png);
          background-size: 224px 166px;
          background-repeat: no-repeat;

          .value {
            font-size: 40px;
            font-family: Adobe Heiti Std;

            .count {
              font-size: 24px;
            }
          }
        }

        .text:nth-child(2) {
          color: #219421;
          background-image: url(./img/zj2.png);
        }
        .text:nth-child(3) {
          color: #B95933;
          background-image: url(./img/zj3.png);
        }
      }
    }
  }

  .chart2 {
    height: 470px;
    .chart-box-header {
      padding-left: 40px;
      font-weight: bold;
    }

      .bottom-box {
        padding: 0 40px;
        .zjssly {
          width: 100%;
          height: 380px;
        }
      }
  }

  .chart3 {
    height: 490px;
    .chart-box-header {
      padding-left: 40px;
      font-weight: bold;
    }

      .bottom-box {
        width: 100%;
        height: 400px;
        padding: 0 40px;

        .zjzc {
          width: 100%;
          height: 100%;
        }
      }
  }

  .chart4 {
    height: 650px;
    .chart-box-header {
      padding-left: 40px;
      font-weight: bold;
    }

      .bottom-box {
        padding: 0 40px;
        .certificate-item {
          height: 112px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 24px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #000000;
          border-bottom: 1px dashed #959595;

          .left {
            display: flex;
            align-items: center;
            img {
              width: 51px;
              height: 51px;
              margin-right: 25px;
            }
          }

          .right {
            font-size: 36px;
          }
        }

        .certificate-item:nth-child(5){
          border-bottom: none;
        }
      }
  }
}
</style>
